<template>
  <div class="box">
    <searchForm />
    <btns />
    <dataTable :films="films" :total="total" :loadData="loadData" :page="page" />
  </div>
</template>

<script>
import searchForm from './ui/searchForm.vue'
import btns from './ui/btns.vue'
import dataTable from './ui/dataTable.vue'
import { getFilmsListApi } from '@/api/filmApi'
export default {
  props: ['page'],
  components: {
    searchForm,
    btns,
    dataTable
  },
  data() {
    return {
      films: [],
      total: 0
    }
  },
  mounted() {
    // console.log(process.env.VUE_APP_VERSION)
    this.loadData(this.page)
  },
  methods: {
    async loadData(page) {
      let ret = await getFilmsListApi(page, 5)
      if (ret.code === 0) {
        this.films = ret.data.films
        this.total = ret.data.total
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  padding: 10px;
  background: #fff;
  min-height: 100%;
}
</style>
